﻿<DemoPageSectionComponent Id="Navigation-ContextMenu-Templates" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <div class="demo-preventsel target-container" tabindex="0"
             @oncontextmenu="@OnContextMenu"
             @oncontextmenu:preventDefault
             @onkeydown="@OnKeyDown">
            <p style="display: inline-block; text-align: center; margin: auto; color:@TextColor; background-color:@BackgroundColor">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
        </div>

        <DxContextMenu @ref="@ContextMenu" PositionTarget="#section-Templates .target-container" SizeMode="Params.SizeMode">
            <Items>
                <DxContextMenuItem Text="Text color">
                    <SubMenuTemplate>
                        <ColorPicker HeaderText="Text color" SelectedColor="@TextColor" ColorChanged="ChangeTextColor"/>
                    </SubMenuTemplate>
                </DxContextMenuItem>
                <DxContextMenuItem Text="Background color">
                    <SubMenuTemplate>
                        <ColorPicker HeaderText="Background color" SelectedColor="@BackgroundColor" ColorChanged="@ChangeBackgroundColor"/>
                    </SubMenuTemplate>
                </DxContextMenuItem>
                <DxContextMenuItem Text="Reset colors" Click="@ResetColors" BeginGroup="true"
                                   Enabled="@(BackgroundColor != UnsetValue || TextColor != UnsetValue)"/>
            </Items>
        </DxContextMenu>

        @code {
            const string UnsetValue = "unset";
            DxContextMenu ContextMenu { get; set; }
            private string TextColor { get; set; } = UnsetValue;
            private string BackgroundColor { get; set; } = UnsetValue;

            void ChangeTextColor(string color) {
                TextColor = color;
                ContextMenu.HideAsync();
            }
            void ChangeBackgroundColor(string color) {
                BackgroundColor = color;
                ContextMenu.HideAsync();
            }
            void ResetColors() {
                BackgroundColor = TextColor = UnsetValue;
                InvokeAsync(StateHasChanged);
            }
            async void OnContextMenu(MouseEventArgs args) {
                await ContextMenu.ShowAsync(args);
            }
            async void OnKeyDown(KeyboardEventArgs args) {
                if (args.Key == "F10" && args.ShiftKey)
                    await ContextMenu.ShowAsync(ContextMenuPosition.Center);
            }
        }
    </ChildContentWithParameters>
</DemoPageSectionComponent>
